<ion-header>
  <ion-navbar>
    <ion-title text-center>
      个人中心
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-card-header>
      我的信息
    </ion-card-header>
    <ion-card-content>
      <div *ngIf="userInfoService?.isLogin">
        <ion-grid>
          <ion-row>
            <ion-col col-5 md-col-6>
              <div avator text-center (click)="pickPic()">
                <img src={{userInfo?.picURI}}/>
              </div>
            </ion-col>
            <ion-col col-7 md-col-6>
              <div>
                <h2 item-text-wrap ><b>用户名：</b>{{userInfo?.username}}</h2>
                <div item-text-wrap tappable (click)="changeMoto()"><b>座右铭：</b>
                  <p>{{userInfo?.moto}}</p>
                </div>
              </div>

            </ion-col>
          </ion-row>
        </ion-grid>
        <div text-center>
          <button ion-button round outline wrap (click)="checkIn()" [disabled]="userInfo?.today?.todayCheckIn"> <b *ngIf="!userInfo?.today?.todayCheckIn">打卡</b> <b *ngIf="userInfo?.today?.todayCheckIn">打卡{{userInfo?.checkInCounts}}天</b></button>
          <button ion-button round outline wrap (click)="logOut()" > <b>注销</b></button>
        </div>
      </div>
      <div *ngIf="!userInfoService?.isLogin" text-center>
          
            <ion-item>
              <ion-label floating >用户名</ion-label>
              <ion-input #username type="text"></ion-input>
            </ion-item>

            <ion-item>
              <ion-label floating>密码</ion-label>
              <ion-input #password type="password" ></ion-input>
            </ion-item>
         
          <button ion-button outline round (click)="logIn(username.value,password.value)">登录</button> 
          <button ion-button outline round (click)="signIn(username.value,password.value)">注册</button> 
      </div>
    </ion-card-content>
  </ion-card>
  <ion-card *ngIf="userInfoService?.isLogin">
    <ion-card-header>
      今日成就
    </ion-card-header>
    <ion-card-content text-center>
      <h2>做对{{userInfo?.today?.rightItemCount}}道题</h2>
      <h2>做错{{userInfo?.today?.wrongItemCount}}道题</h2>
      <h2>共计{{userInfo?.today?.rightItemCount+userInfo?.today?.wrongItemCount}}道题</h2>
      <h2>正确率：{{userInfo?.today?.rate}}%</h2>
      <button ion-button outline round (click)="showAchieve()">查看全部成就</button>
    </ion-card-content>
  </ion-card>
  <ion-card>
    <ion-card-header>
      试题库
    </ion-card-header>
    <ion-card-content>
      <ion-grid>
        <ion-row>
          <ion-col col-6>
            <button ion-button block outline round (click)="updateBtnClick()">更新数据库</button>
          </ion-col>
          <ion-col col-6>
            <button ion-button block outline round (click)="clear()">清空并退出</button>

          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>
</ion-content>
